<script setup>
//引入dayjs日期库
import dayjs from 'dayjs'
//定义响应式数据
import { ref, watch } from 'vue'
import { fetch24HourData } from '../api/weatherAPI'
import { initBasicBarChart } from '../util/echarts'

//声明一个变量获取未来24小时的天气数据，此数组有24个，是数组
const hour24 = ref([]) //表示此数据是空数组,用来存放api中返回的未来24小时天气数据
//声明两个变量分别存放预报时间和温度
const hour24FxTime = ref([]) //存放未来24小时的预报时间
const hour24Temp = ref([]) //存放未来24小时的温度
const updateTime = ref('') //天气更新时间

const chartDom = ref(null) //图表容器dom元素

//引用状态管理
import { useCityStore } from '../stores/cityStore'
//获取store实例
const cityStore = useCityStore()

//添加侦听器：监听状态管理中Location状态的变化
watch(
  //第一个参数（必选）：监听的数据源
  () => cityStore.location,
  //第二个参数（必选）：回调函数，当数据源有变化时需要做的事情
  () => {
    getData(cityStore.location.id)
  },
  //第三个函数（可选）：即使回调，初始状态执行一次回调函数
  { immediate: true }
)

//调用网络请求的函数
// getData(cityStore.location.id)

//调用axios封装及api模块的函数（异步网络请求）
async function getData(locationID) {
  const res = await fetch24HourData(locationID) //调用api模块化封装的函数
  console.log(res)
  updateTime.value = dayjs(res.updateTime).format('YYYY年MM月DD日 HH时mm分') //保存后端获取的更新时间updateTime
  hour24.value = res.hourly //把响应数据临时先保存到hour24中
  //初始化未来24小时时间和温度的数组为空
  hour24FxTime.value = []
  hour24Temp.value = []
  //遍历未来24小时数据，把fxTime（预报时间）和Temp(温度)提取出来放到hour24fxtime和hour24temp
  hour24.value.forEach((element) => {
    hour24FxTime.value.push(element.fxTime) //预报时间
    hour24Temp.value.push(element.temp) //温度
  })

  // 提取每两小时的数据，先遍历数组，忽略当前值，用索引表示，当索引为偶数时，提取再返回新数组
  const twoHourFxTime = hour24FxTime.value.filter((_, index) => index % 3 === 0)
  const twoHourTemp = hour24Temp.value.filter((_, index) => index % 3 === 0)

  // 修改时间格式化逻辑，添加 am/pm 标识
  const formattedTwoHourFxTime = twoHourFxTime.map((x) => {
    const hour = dayjs(x).hour()
    return `${dayjs(x).format('HH')}${hour < 12 ? 'am' : 'pm'}`
  })

  //调用图表函数
  initBasicBarChart(chartDom.value, formattedTwoHourFxTime, twoHourTemp)
}
</script>


<template>
  <!-- 在页面中也可以使用响应状态数据 -->
  <div>
    <!-- {{ hour24 }} -->
    <h3>24小时预报</h3>
    <div class="update">
      <span>最后更新时间:{{ updateTime }}</span>
    </div>

    <!-- 添加图表库所需要的容器 -->
    <!-- vue3中获取dom元素的方式,此为第二步，在容器元素中添加ref属性与第一步中的引用进行绑定 -->
    <div id="main" ref="chartDom"></div>
  </div>
</template>

<style scoped>
#main {
  width: 100%;
  height: 400px;
}

h3 {
  text-align: center;
}
.update {
  text-align: center;
}
</style>